import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
    Form,
    Select,
    Card,
    Col,
    Row,
    Tabs,
    Button,
    Modal, 
    Divider
} from 'antd';

import {
    yuan,
    Pie,
} from 'components/Charts';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';
import querystring from 'querystring';
import dot1 from '../../../assets/dot1.png';
import dot2 from '../../../assets/dot2.png';
import dot3 from '../../../assets/dot3.png';
import dot4 from '../../../assets/dot4.png';
import dot5 from '../../../assets/dot5.png';
import styles from './style.less';
import NumberInfo from 'components/NumberInfo';
import TextArea from 'antd/lib/input/TextArea';

const { TabPane } = Tabs;
const { Description } = DescriptionList;

const offlineData = [];
const dateTest = ["身份认证", "欺诈评估", "信用评估", "增信评估", "操作风险"]
for (let i = 0; i < 5; i += 1) {
    offlineData.push({
        name: dateTest[i],
        cvr: Math.ceil(Math.random() * 9) / 10,
    });
}
const offlineChartData = [];
for (let i = 0; i < 30; i += 1) {
    offlineChartData.push({
        x: new Date().getTime() + 1000 * 60 * 30 * i,
        y1: Math.floor(Math.random() * 100) + 10,
        y2: Math.floor(Math.random() * 100) + 10,
    });
}

const Yuan = ({ children }) => (
    <span dangerouslySetInnerHTML={{ __html: yuan(children) }} /> /* eslint-disable-line react/no-danger */
);

@connect(({ risk, apply }) => ({
    risk,
    apply
}))
@Form.create()
export default class RiskRateDetails1 extends PureComponent {
    state = {
        createTimeStart: '',
        createTimeEnd: '',
        currentTabKey: '身份认证',
        salesType: 'all',
        modalVisible: false,
    };

    componentDidMount() {
        const { dispatch, location } = this.props;
        const params = querystring.parse(location.search.slice(1));
        this.setState({
            id: params.id,
            taskId: params.taskId,
            applyDisabled: params.applyDisabled == 1 ? true : false,
            loaded: true,
        });
        dispatch({
            type: 'apply/detailsApply',
            payload: {
                projectId: params.id,
            },
        });
    }
    handleTabChange = key => {
        this.setState({
            currentTabKey: key,
        });
    };

    salesTypeData = [
        {
            x: '身份认证',
            y: 110,
        },
        {
            x: '人脸识别',
            y: 83,
        },
        {
            x: '声音识别',
            y: 131,
        },
        {
            x: '视频面签',
            y: 38,
        },
    ];

    salesTypeDataOnline = [
        {
            x: '历史欺诈嫌疑',
            y: 70,
        },
        {
            x: '电信黑名单',
            y: 16,
        },
        {
            x: '多头借贷',
            y: 51,
        },
        {
            x: '涉诉',
            y: 11,
        },
        {
            x: '涉案件',
            y: 34,
        },
    ];

    salesTypeDataOffline = [
        {
            x: '历史逾期',
            y: 80,
        },
        {
            x: '信用卡数',
            y: 35,
        },
        {
            x: '其他贷款',
            y: 43,
        },
        {
            x: '黑名单',
            y: 9,
        },
        {
            x: '白户',
            y: 13,
        },
    ];

    salesTypeDataOffline1 = [
        {
            x: '担保人',
            y: 10,
        },
        {
            x: '共还人',
            y: 35,
        },
        {
            x: '抵押',
            y: 72,
        },
        {
            x: '担保机构',
            y: 29,
        },
        {
            x: '其他增信',
            y: 41,
        },
    ];

    salesTypeDataOffline2 = [
        {
            x: '修改次数',
            y: 10,
        },
        {
            x: '家访',
            y: 35,
        },
        {
            x: '材料齐全',
            y: 102,
        },
        {
            x: '视频面签',
            y: 9,
        },
    ];
    handleChangeSalesType = e => {
        this.setState({
            salesType: e.target.value,
        });
    };

    handleSalesPieData1 = () => {
        return this.salesTypeData
    }
    handleSalesPieData2 = () => {
        return this.salesTypeDataOnline
    }
    handleSalesPieData3 = () => {
        return this.salesTypeDataOffline
    }
    handleSalesPieData4 = () => {
        return this.salesTypeDataOffline1
    }
    handleSalesPieData5 = () => {
        return this.salesTypeDataOffline2
    }
    handleSalesPieData6 = () => {
        return '78/100'//this.salesTypeData.reduce((pre, now) => now.y + pre, 0)
    }
    handleSalesPieData7 = () => {
        return '92/100'//this.salesTypeDataOnline.reduce((pre, now) => now.y + pre, 0)
    }
    handleSalesPieData8 = () => {
        return '58/100'//this.salesTypeDataOffline.reduce((pre, now) => now.y + pre, 0)
    }
    handleSalesPieData9 = () => {
        return '39/100'//this.salesTypeDataOffline1.reduce((pre, now) => now.y + pre, 0)
    }
    handleSalesPieData10 = () => {
        return '56/100'//this.salesTypeDataOffline2.reduce((pre, now) => now.y + pre, 0)
    }


    handleSubmit = () => {
        this.setState({ modalVisible: true })
    }
    handleRiskCancel = () => {
        this.setState({ modalVisible: false })
    }
    handleRiskOK = () => {
        this.setState({ modalVisible: true })
    }
    data = [
        {
            title: 'Ant Design Title 1',
        },
        {
            title: 'Ant Design Title 2',
        },
        {
            title: 'Ant Design Title 3',
        },
        {
            title: 'Ant Design Title 4',
        },
    ];

    render() {
        const { apply: { applyListDetails, applyLoading } } = this.props;
        const { getFieldDecorator } = this.props.form;
        const { rangePickerValue, salesType, currentTabKey } = this.state;
        const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);

        const topColResponsiveProps = {
            xs: 24,
            sm: 12,
            md: 12,
            lg: 12,
            xl: 6,
            style: { marginBottom: 24 },
        };
        const salesPieData =
            salesType === 'all'
                ? this.salesTypeData
                : salesType === 'online' ? this.salesTypeDataOnline : this.salesTypeDataOffline;

        const customeDate = ["30/45", "81/90", "30/50", "30/30", "100/100",]
        const CustomTab = ({ data, currentTabKey: currentKey, indexs }) => (
            <Row gutter={8} style={{ width: 148, margin: '8px 0', marginTop: 40 }}>
                <Col span={16}>
                    <NumberInfo
                        title={data.name}
                        subTitle="得分"
                        gap={2}
                        total={customeDate[indexs]}
                        theme={currentKey !== data.name && 'light'}
                    />
                </Col>
                <Col span={8} style={{ paddingTop: 36 }}>
                    <Pie
                        animate={false}
                        color={currentKey !== data.name && '#BDE4FF'}
                        inner={0.55}
                        tooltip={false}
                        margin={[10, 0, 0, 0]}
                        percent={data.cvr * 100}
                        height={64}
                    />
                </Col>
            </Row>
        );
        const formItemLayout = {
            labelCol: {
                span: 5,
            },
            wrapperCol: {
                span: 18,
            },
        };

        return (
            <PageHeaderLayout title="风险评级">
                {/* {JSON.stringify(applyListDetails)} applyListDetails.customer[0].custName*/}
                <Card
                    title="业务信息"
                    loading={applyLoading}
                >
                    <DescriptionList col="3">
                        <Description term="客户名称">{"张兴发"}</Description>
                        <Description term="证件号">{"210157199012110576"}</Description>
                        <Description term="家庭地址">{"上海浦东新区张杨路"}</Description>
                        <Description term="经销商">{"上海汽车销售有限公司"}</Description>
                        <Description term="产品类型">{"新车"}</Description>
                        <Description term="工作地址">{"上海徐家汇"}</Description>
                        <Description term="所购车型">{"奥迪A4"}</Description>
                        <Description term="车价">{"225476"}</Description>
                        <Description term="分期数">{"36"}</Description>
                        <Description term="贷款金额">{"128760"}</Description>
                    </DescriptionList>
                </Card>
                {/* <Row gutter={24}>
                    <Col {...topColResponsiveProps}>
                        <ChartCard
                            bordered={false}
                            title="总评分"
                            action={
                                <Tooltip title="指标说明">
                                    <Icon type="info-circle-o" />
                                </Tooltip>
                            }
                            total="384分"
                            footer={
                                <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                                    <Trend style={{ marginRight: 16 }}>
                                        审批完成度<span style={{ marginLeft: 50 }}>72%</span>
                                    </Trend>
                                </div>
                            }
                            contentHeight={46}
                        >
                            <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
                        </ChartCard>
                    </Col>
                </Row> */}
                <Card
                    className={styles.offlineCard}
                    bordered={false}
                    bodyStyle={{ padding: '0 0 32px 0' }}
                    style={{ marginTop: 32 }}
                >

                    <div style={{ padding: '0 24px' }}>
                        <h4 style={{ marginTop: 8, marginBottom: 32 }}>{"身份证认证"}</h4>

                        <Pie
                            style={{ marginLeft: -500, marginTop: -60 }}
                            // hasLegend
                            subTitle="得分"
                            total={
                                () => this.handleSalesPieData6()//<Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>
                            }
                            data={this.handleSalesPieData1()}
                            valueFormat={value => <span>{value + "分"}</span>}//<Yuan>{value}</Yuan>}
                            height={158}
                            lineWidth={4}
                        >
                        </Pie>
                        <h4 >{"欺诈评估"}</h4>
                        <Pie
                            style={{ marginLeft: -500 }}
                            // hasLegend
                            subTitle="得分"
                            total={ 
                                () => this.handleSalesPieData7()//<Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>
                            }
                            data={this.handleSalesPieData2()}
                            valueFormat={value => <span>{value + "分"}</span>}//<Yuan>{value}</Yuan>}
                            height={158}
                            lineWidth={4}
                        >
                        </Pie>
                        <h4 >{"信用评估"}</h4>
                        <Pie
                            style={{ marginLeft: -500 }}
                            // hasLegend
                            subTitle="得分"
                            total={
                                () => this.handleSalesPieData8()//<Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>
                            }
                            data={this.handleSalesPieData3()}
                            valueFormat={value => <span>{value + "分"}</span>}//<Yuan>{value}</Yuan>}
                            height={158}
                            lineWidth={4}
                        >
                        </Pie>
                        <h4 >{"增信评估"}</h4>
                        <Pie
                            style={{ marginLeft: -500 }}
                            // hasLegend
                            subTitle="得分"
                            total={
                                () => this.handleSalesPieData9()//<Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>
                            }
                            data={this.handleSalesPieData4()}
                            valueFormat={value => <span>{value + "分"}</span>}//<Yuan>{value}</Yuan>}
                            height={158}
                            lineWidth={4}
                        >
                        </Pie>
                        <h4 >{"操作风险"}</h4>
                        <Pie
                            style={{ marginLeft: -500 }}
                            // hasLegend
                            subTitle="得分"
                            total={
                                () => this.handleSalesPieData10()//<Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>
                            }
                            data={this.handleSalesPieData5()}
                            valueFormat={value => <span>{value + "/1000分"}</span>}//<Yuan>{value}</Yuan>}
                            height={158}
                            lineWidth={4}
                        >
                        </Pie>

                        {/* {this.state.currentTabKey == "身份认证" ? */}
                        < div style={{ float: 'right', width: 400, marginTop: -890 }}>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot3} style={{ width: 20, height: 20 }}>
                                    </img>身份证认证 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>完成</p></Col><Col span={4}> <p >5/5分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot4} style={{ width: 20, height: 20 }}>
                                    </img>人脸识别 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={4}> <p style={{ color: 'red' }}>未完成</p> </Col> <Col span={4}> <p >5/10分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot2} style={{ width: 20, height: 20 }}>
                                    </img>声音识别 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>完成</p> </Col><Col span={4}> <p >10/10分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot1} style={{ width: 20, height: 20 }}>
                                    </img>视频面签 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>完成</p> </Col> <Col span={4}>  <p >15/15分</p></Col>
                            </Row>
                        </div>
                        {/* : null
                                    }
                                    {this.state.currentTabKey == "增信评估" ? */}
                        < div style={{ float: 'right', width: 400, marginTop: -720 }}>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot3} style={{ width: 20, height: 20 }}>
                                    </img>担保人 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>无</p></Col><Col span={4}> <p >0分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot4} style={{ width: 20, height: 20 }}>
                                    </img>共还人 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={4}> <p style={{ color: 'green' }}>无</p> </Col> <Col span={4}> <p >0分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot2} style={{ width: 20, height: 20 }}>
                                    </img>抵押 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'red' }}>已办</p> </Col><Col span={4}> <p >5分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot1} style={{ width: 20, height: 20 }}>
                                    </img>担保机构 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>有</p> </Col> <Col span={4}>  <p >30分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot5} style={{ width: 20, height: 20 }}>
                                    </img>其他增信 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>无</p> </Col> <Col span={4}>  <p >0分</p></Col>
                            </Row>
                        </div>
                        {/* : null
                                    }
                                    {this.state.currentTabKey == "欺诈评估" ? */}
                        <div style={{ float: 'right', width: 400, marginTop: -530 }}>
                            <Row gutter={16}>
                                <Col span={9}><span >
                                    <img src={dot3} style={{ width: 20, height: 20 }}>
                                    </img>历史欺诈嫌疑 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={3}><p style={{ color: 'green' }}>完成</p></Col><Col span={3}> <p >91分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot4} style={{ width: 20, height: 20 }}>
                                    </img>电信黑名单 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={4}> <p style={{ color: 'green' }}>无</p> </Col> <Col span={4}> <p >88分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot2} style={{ width: 20, height: 20 }}>
                                    </img>多头借贷 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'red' }}>疑似</p> </Col><Col span={4}> <p >12分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot1} style={{ width: 20, height: 20 }}>
                                    </img>涉诉 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>无</p> </Col> <Col span={4}>  <p >20分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot5} style={{ width: 20, height: 20 }}>
                                    </img>涉案件 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>无</p> </Col> <Col span={4}>  <p >20分</p></Col>
                            </Row>
                        </div>
                        {/* : null
                                    // } {this.state.currentTabKey == "信用评估" ? */}
                        <div style={{ float: 'right', width: 400, marginTop: -330 }}>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot3} style={{ width: 20, height: 20 }}>
                                    </img>历史逾期 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>无</p></Col><Col span={4}> <p >20分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot4} style={{ width: 20, height: 20 }}>
                                    </img>信用卡数 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={4}> <p style={{ color: 'green' }}>5张</p> </Col> <Col span={4}> <p >12分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot2} style={{ width: 20, height: 20 }}>
                                    </img>其他贷款 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'red' }}>200/月</p> </Col><Col span={4}> <p >5分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot1} style={{ width: 20, height: 20 }}>
                                    </img>黑名单 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>无</p> </Col> <Col span={4}>  <p >30分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot5} style={{ width: 20, height: 20 }}>
                                    </img>白户 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>无</p> </Col> <Col span={4}>  <p >0分</p></Col>
                            </Row>
                        </div>
                        {/* // : null} */}
                        {/* {this.state.currentTabKey == "操作风险" ? */}
                        <div style={{ float: 'right', width: 400, marginTop: -130 }}>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot3} style={{ width: 20, height: 20 }}>
                                    </img>修改次数 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>5</p></Col><Col span={4}> <p >7分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot4} style={{ width: 20, height: 20 }}>
                                    </img>家访 <Divider type="vertical" /> </span>
                                </Col>
                                <Col span={4}> <p style={{ color: 'green' }}>已做</p> </Col> <Col span={4}> <p >10分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}> <span >
                                    <img src={dot2} style={{ width: 20, height: 20 }}>
                                    </img>材料齐全 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'red' }}>92%</p> </Col><Col span={4}> <p >9分</p></Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={8}><span >
                                    <img src={dot1} style={{ width: 20, height: 20 }}>
                                    </img>视频面签 <Divider type="vertical" /></span>
                                </Col>
                                <Col span={4}><p style={{ color: 'green' }}>有</p> </Col> <Col span={4}>  <p >30分</p></Col>
                            </Row>
                        </div>
                        {/* // : null} */}
                    </div>

                    {/* <Tabs activeKey={activeKey} onChange={this.handleTabChange} tabPosition={"left"}>
                        {offlineData.map((shop, index) => (
                            <TabPane tab={<CustomTab indexs={index} data={shop} currentTabKey={activeKey} />} key={shop.name} >
                            </TabPane>
                        ))}
                    </Tabs> */}
                    <div style={{ textAlign: 'center', marginLeft: '10px', marginTop: '50px' }}>
                        <Button type="primary" onClick={this.handleSubmit}>提交</Button>
                        <Button type="danger" style={{ marginLeft: '10px' }}>否决</Button>
                        <Button style={{ marginLeft: '10px' }}>驳回</Button>
                        <Button style={{ marginLeft: '10px' }}>返回</Button>
                    </div>
                </Card >
                <Modal
                    title="审核意见"
                    visible={this.state.modalVisible}
                    onCancel={this.handleRiskCancel}
                    onOk={this.handleRiskOK}
                >
                    <Form style={{ marginTop: 10 }}>
                        <Form.Item {...formItemLayout} label="审核意见">
                            {getFieldDecorator('auditOpinion', {
                                rules: [{ required: true, message: '请输入审核意见' }],
                            })(
                                <TextArea rows={4} placeholder="请输入审核意见"></TextArea>
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </PageHeaderLayout >
        );
    }
}
